<template>
  <div class="itemList">
    <el-table ref="itemList" :data="itemList" tooltip-effect="dark" style="width:100%">
      <el-table-column label="id" min-width="30">
        <template slot-scope="scope">{{scope.row.id}}</template>
      </el-table-column>
      <el-table-column label="商品" min-width="100">
        <template slot-scope="scope">
          <div class="itemImgBox">
            <img class="itemImg" :src="scope.row.imgUrl" :alt="scope.row.itemName">
          </div>
          <div class="skuInfoBox">
            <p>{{scope.row.itemName}}</p>
            <p v-for="item in scope.row.skus">{{item.name}}：{{item.desc}}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="数量" min-width="40">
        <template slot-scope="scope"><span class="quantity">{{scope.row.quantity}}</span></template>
      </el-table-column>
      <el-table-column label="买家" min-width="40">
        <template slot-scope="scope">{{scope.row.nickName}}</template>
      </el-table-column>
      <el-table-column label="下单时间" min-width="80">
        <template slot-scope="scope">{{scope.row.createDate | formatDate}}</template>
      </el-table-column>
      <el-table-column label="实付现金" min-width="60">
        <template slot-scope="scope"><span class="fee">{{scope.row.price | formatPrice}}</span></template>
      </el-table-column>
      <el-table-column label="实付积分" min-width="60">
        <template slot-scope="scope"><span class="point">{{scope.row.point}}</span></template>
      </el-table-column>
      <el-table-column label="订单状态" min-width="60">
        <template slot-scope="scope">{{scope.row.status}}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom" :enterable="false">
            <el-button @click="showEditModal(scope.row.id)" type="primary" size="mini" icon="el-icon-edit" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="bottom" :enterable="false">
            <el-button @click="deleteSingle(scope.$index)" type="danger" size="mini" icon="el-icon-delete" circle></circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'itemList',
    components: {
    },
    data(){
      return {
        itemList: this.$test.itemList
      }
    },
    methods: {
    },
    created() {
      const data={
        r: "goodsLink/www",
        data: "123"
      };
      this.$api.login(data).then(res => {
        console.log(res);
      });
    }
  }
</script>

<style lang="scss" scoped>
.itemList{
  .itemImgBox{
    display: inline-block;
    .itemImg{
      width: 100px;
      height: 100px;
    }
  }
  .skuInfoBox{
    margin-left: 5px;
    display: inline-block;
  }
}
</style>